import React, { Component } from 'react';
import {FilterBox, FilterItem} from "../style";
import {  connect } from 'react-redux';
import { actionCreators } from '../store';
class SearchFilter extends Component {
  render() {
    const { FirstFilter,SecondFilter, ThirdFilter,changeFirstShowState,
      changSecondShowState,changThirdShowState,changeFirstConditionState,
      changeSecondConditionState, changeThirdConditionState,InputValue,pageSize} = this.props;
    return (
      <FilterBox>
        {FirstFilter.map( (item ) => {
          return <FilterItem className={(item.get('show')||item.get('condition')==1)?'choose':'notChoose'}
                             key={item.get("id")}
                             onMouseEnter={ () => changeFirstShowState(item.get('id'))}
                             onMouseLeave={ () => changeFirstShowState(item.get('id'))}
                             onClick={ () =>changeFirstConditionState(item.get('id'),FirstFilter,SecondFilter,ThirdFilter,InputValue,pageSize)}>{item.get('content')}</FilterItem>
        })}
        <br/>
        <br/>
        <br/>
        <br/>
        {SecondFilter.map( (item) => {
          return <FilterItem className={(item.get('show')||item.get('condition')==1)?'choose':'notChoose'}
                             key={item.get("id")}
                             onMouseEnter={ () => changSecondShowState(item.get('id'))}
                             onMouseLeave={ () => changSecondShowState(item.get('id'))}
                             onClick={ () =>changeSecondConditionState(item.get('id'),FirstFilter,SecondFilter,ThirdFilter,InputValue,pageSize)}>{item.get('content')}</FilterItem>
        })}
        <br/>
        <br/>
        <br/>
        <br/>
        {ThirdFilter.map( (item) => {
          return <FilterItem className={(item.get('show')||item.get('condition')==1)?'choose':'notChoose'}
                             key={item.get("id")}
                             onMouseEnter={ () => changThirdShowState(item.get('id'))}
                             onMouseLeave={ () => changThirdShowState(item.get('id'))}
                             onClick={ () =>changeThirdConditionState(item.get('id'),FirstFilter,SecondFilter,ThirdFilter,InputValue,pageSize)}>{item.get('content')}</FilterItem>
        })}
      </FilterBox>
    )
  }
}
const mapStateToProps = (state) =>{
  return {
    FirstFilter: state.get('search').get('FirstFilter'),
    SecondFilter: state.get('search').get('SecondFilter'),
    ThirdFilter: state.get('search').get('ThirdFilter'),
    InputValue: state.get('search').get('InputValue'),
    pageSize : state.get('search').get('pageSize')
  }
}
const mapDispatchToProps = (dispatch) => ({
  changeFirstShowState(index){
    dispatch(actionCreators.changeShowState(index,'FirstFilter'))
  },
  changSecondShowState(index){
    dispatch(actionCreators.changeShowState(index,'SecondFilter'))
  },
  changThirdShowState(index){
    dispatch(actionCreators.changeShowState(index,'ThirdFilter'))
  },
  changeFirstConditionState(index,FirstFilter,SecondFilter,ThirdFilter,keyword,pageSize){
    dispatch(actionCreators.getDiffConditionContent(index,'FirstFilter',FirstFilter,SecondFilter,ThirdFilter,keyword,pageSize))
  },
  changeSecondConditionState(index,FirstFilter,SecondFilter,ThirdFilter,keyword,pageSize){
    dispatch(actionCreators.getDiffConditionContent(index,'SecondFilter',FirstFilter,SecondFilter,ThirdFilter,keyword,pageSize))
  },
  changeThirdConditionState(index,FirstFilter,SecondFilter,ThirdFilter,keyword,pageSize){
    dispatch(actionCreators.getDiffConditionContent(index,'ThirdFilter',FirstFilter,SecondFilter,ThirdFilter,keyword,pageSize))
  },
})
export default connect(mapStateToProps,mapDispatchToProps)(SearchFilter)
